<template>
  <!-- 未绑定手机号确定与取消弹窗 -->
    <div class="isOpenForBindPhone">
        <div class="BindPhoneDiv">
          <i class="el-icon-tickets"></i>
          <h3 >您还未绑定手机号</h3>
        </div>
        <p class="BindPhoneP">可用绑定的手机号登录,找回密码</p>
        <el-button
          :loading="loading"
          type=""
          size="medium"
          class="login-button"
          style="width: 100%;margin: 42px 0 6px;"
          @click="cancleLoad"
        >退出登录</el-button>

        <el-button
          :loading="loading"
          type="primary"
          class="login-button"
          size="medium"
          style="width: 100%;margin: 10px 0 0 0;"
          @click="bindPhoneForLoad"
        >立即绑定</el-button>
    </div>
</template>

<script>
export default {
  name: 'dialogUi',
  data () {
    return {
        loading:false,
    }
  },
  methods: {
    //退出
    cancleLoad(){
        this.$emit("cancleLoad")
    },
    //绑定
    bindPhoneForLoad(){
        this.$emit("bindPhoneForLoad")
    }
  },
}
</script>

<style scoped lang="less">
.isOpenForBindPhone{
    width:384px;
    height:206px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 8px 0px rgba(0,4,10,0.08);
    border-radius:4px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -111px;
    z-index: 99;
    padding: 16px;
    .BindPhoneDiv{
      i{
        width: 24px;
        height: 24px;
        line-height: 24px;
        background: #F7912C;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        float: left;
        margin-right: 10px;
      }
      h3{
        width:186px;
        height:24px;
        font-size:16px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(0,4,10,0.85);
        line-height:24px;
      }
    }
    .BindPhoneP{
      width:324px;
      height:22px;
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(0,4,10,0.65);
      line-height:22px;
      margin: 26px 0 0 34px;
    }
  }
</style>
